<template>
  <div class="zz-inverting-storage-page">
    <div class="top-warning-view">
      <a-alert message="注意事项" type="warning">
        <template slot="description">
          <div class="auto-wrap">1、倒库，起始库位数与目标库位数应保持一致。</div>
          <div class="auto-wrap">2、倒库，每次移动库位的物料应该是一致的。</div>
        </template>
      </a-alert>
    </div>
    <div class="hor-divider"></div>
    <div class="double-lists-view">
      <div class="inverting-block">
        <div class="title no-wrap">起始库位</div>
        <div class="search-bar">
          <search-form ref="search1" :areas="selectList.areas" :rows="selectList.rows1" @change="onSearchChange1" />
        </div>
        <div class="list-box">
          <list-box ref="list1" />
        </div>
      </div>
      <div class="ver-divider"></div>
      <div class="inverting-block">
        <div class="title no-wrap">目标库位</div>
        <div class="search-bar">
          <search-form ref="search2" :areas="selectList.areas" :rows="selectList.rows2" @change="onSearchChange2" />
        </div>
        <div class="list-box">
          <list-box ref="list2" />
        </div>
      </div>
    </div>
    <div class="hor-divider"></div>
    <div class="bottom-btns-row">
      <a-button @click="onSubmit('manual')">人工倒库</a-button>
      <a-button type="primary" @click="onSubmit('auto')">自动倒库</a-button>
    </div>
  </div>
</template>

<script>
import SearchForm from './SearchForm.vue'
import ListBox from './ListBox.vue'
import { GetArea, GetPalceRowno } from '@/api/modular/main/LocationViewManage'
import { GetCunHouPlace, GetKongXianPlace, ManualSubmit, AutoSubmit } from '@/api/modular/main/InvertingStorageManage'
export default {
  name:'zzInvertingStoragePage',
  components:{SearchForm, ListBox},
  data(){
    return {
      selectList:{
        areas:[],
        rows1:[],
        rows2:[]
      }
    }
  },
  methods:{
    init(){
      this.$loading.show()
      this.getSelectListAreas((f1,val)=>{
        if (f1) {
          this.getSelectListRows(val,(f2)=>{
            if (f2) {
              this.getCunHuoList((f3)=>{
                if (f3) {
                  this.getKongXianList(()=>{
                    this.$loading.hide()
                  })
                } else {
                  this.$loading.hide()
                }
              })
            } else {
              this.$loading.hide()
            }
          })
        } else {
          this.$loading.hide()
        }
      })
    },
    onSearchChange1(type,val){
      if (type==='area') {
        this.areaChange1(val)
      } else {
        this.rowChange1(val)
      }
    },
    areaChange1(val){
      this.$loading.show()
      this.getSelectListRows(val,(f)=>{
        if (f) {
          this.getCunHuoList(()=>{
            this.$loading.hide()
          })
        } else {
          this.$loading.hide()
        }
      },1)
    },
    rowChange1(val){
      this.$loading.show()
      this.getCunHuoList(()=>{
        this.$loading.hide()
      })
    },
    onSearchChange2(type,val){
      if (type==='area') {
        this.areaChange2(val)
      } else {
        this.rowChange2(val)
      }
    },
    areaChange2(val){
      this.$loading.show()
      this.getSelectListRows(val,(f)=>{
        if (f) {
          this.getKongXianList(()=>{
            this.$loading.hide()
          })
        } else {
          this.$loading.hide()
        }
      },2)
    },
    rowChange2(val){
      this.$loading.show()
      this.getKongXianList(()=>{
        this.$loading.hide()
      })
    },
    getSelectListAreas(callback){
      GetArea().then((d)=>{
        this.selectList.areas = d.data || [];
        if (this.selectList.areas.length>0) {
          let _temp = this.selectList.areas[0].id
          this.$refs.search1.setAreaValue(_temp)
          this.$refs.search2.setAreaValue(_temp)
          callback && callback(true,_temp)
        } else {
          callback && callback(false)
        }
      }).catch(()=>{
        callback && callback(false)
      })
    },
    getSelectListRows(val,callback,listIndex){
      let params = {Areaid:val}
      GetPalceRowno(params).then((d)=>{
        let _arr = d.data || [];
        if (!listIndex || listIndex===1) {
          this.selectList.rows1 = _arr
        }
        if (!listIndex || listIndex===2) {
          this.selectList.rows2 = _arr
        }
        if (_arr.length>0) {
          if (_arr.length===1) {
            if (!listIndex || listIndex===1) {
              this.$refs.search1.setRowValue(this.selectList.rows[0])
            }
            if (!listIndex || listIndex===2) {
              this.$refs.search2.setRowValue(this.selectList.rows[0])
            }
          } else {
            if (!listIndex || listIndex===1) {
              this.$refs.search1.setRowValue(undefined)
            }
            if (!listIndex || listIndex===2) {
              this.$refs.search2.setRowValue(undefined)
            }
          }
          callback && callback(true)
        } else {
          if (!listIndex || listIndex===1) {
            this.$refs.search1.setRowValue(undefined)
          }
          if (!listIndex || listIndex===2) {
            this.$refs.search2.setRowValue(undefined)
          }
          callback && callback(false)
        }
      }).catch(()=>{
        if (!listIndex || listIndex===1) {
          this.selectList.rows1 = []
          this.$refs.search1.setRowValue(undefined)
        }
        if (!listIndex || listIndex===2) {
          this.selectList.rows2 = []
          this.$refs.search2.setRowValue(undefined)
        }
        callback && callback(false)
      })
    },
    getCunHuoList(callback) {
      let params = this.$refs.search1.getValues()
      GetCunHouPlace(params).then(d=>{
        this.$refs.list1.setList(d.data || [])
        callback && callback(true)
      }).catch(()=>{
        this.$refs.list1.setList([])
        callback && callback(false)
      })
    },
    getKongXianList(callback) {
      let params = this.$refs.search2.getValues()
      GetKongXianPlace(params).then(d=>{
        this.$refs.list2.setList(d.data || [])
        callback && callback(true)
      }).catch(()=>{
        this.$refs.list2.setList([])
        callback && callback(false)
      })
    },
    onSubmit(type) {
      this.$loading.show()
      let params = this.getSubmitParams()
      this.checkBeforeSumbit(type,params,(f)=>{
        if (f.flag) {
          this.submitAjax(type,params,(f2)=>{
            this.$loading.hide()
            if (f2) {
              this.$message.success('倒库提交成功');
              this.$refs.list1.emptyChoosen()
              this.$refs.list2.emptyChoosen()
            } 
          })
        } else {
          this.$loading.hide()
          this.$warning({
            title: '系统提示',
            content: f.msg
          });
        }
      })
    },
    checkBeforeSumbit(type,params,callback){
      let res = {flag:true,msg:''}
      if (params.startPlaceList.length!==params.endPlaceList.length) {
        res.flag = false
        res.msg = '起始库位和目标库位的已选库位数不一致。'
      }
      if (res.flag && params.startPlaceList.length===0) {
        res.flag = false
        res.msg = '请选择库位。'
      }
      callback(res)
    },
    getSubmitParams(){
      return {
        startPlaceList:this.$refs.list1.getChoosen(),
        endPlaceList:this.$refs.list2.getChoosen()
      }
    },
    submitAjax(type,params,callback){
      if (type==='auto') {
        this.autoSubmitAjax(params,callback)
      } else {
        this.manualSubmitAjax(params,callback)
      }
    },
    autoSubmitAjax(params,callback) {
      AutoSubmit(params).then(()=>{
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    },
    manualSubmitAjax(params,callback) {
      ManualSubmit(params).then(()=>{
        callback && callback(true)
      }).catch(()=>{
        callback && callback(false)
      })
    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style scoped lang="less">
.zz-inverting-storage-page {
  @dividerSize:12px;
  height:100%;
  display: flex;
  flex-direction: column;
  .hor-divider,.ver-divider,.bottom-btns-row{
    flex-shrink: 0;
  }
  .hor-divider{
    height: @dividerSize;
  }
  .ver-divider{
    width: @dividerSize;
  }
  .top-warning-view{
    flex-shrink: 0;
  }
  .bottom-btns-row{
    display: flex;
    justify-content: center;
    align-items: center;
    .ant-btn + .ant-btn {
      margin-left:20px;
    }
  }
  .double-lists-view{
    flex-grow: 1;
    height: 1px;
    display: flex;
    .inverting-block{
      flex-grow: 1;
      width: 1px;
      border-radius: 2px;
      box-sizing: border-box;
      border: 1px solid #dcdcdc;
      display: flex;
      flex-direction: column;
      &>.title{
        text-align: center;
        background-color: #f0f8ff;
        font-size: 1.5em;
        padding: 4px 0;
        border-bottom: 1px solid #dcdcdc;
      }
      &>.search-bar{
        padding: 6px;
        border-bottom: 1px solid #dcdcdc;
        background-color: #fff;
      }
      &>.title,&>.search-bar{
        flex-shrink: 0;
      }
      &>.list-box{
        flex-grow: 1;
        height: 1px;
      }
    }
  }
}
</style>